{"componentChunkName":"component---src-templates-blog-post-js","path":"/css/scss/","result":{"data":{"site":{"siteMetadata":{"title":"Tory","author":"[Tory]","siteUrl":"https://gatsby-starter-bee.netlify.com","comment":{"disqusShortName":"","utterances":"JaeYeopHan/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"2772601d-7c09-552f-9e4f-34f709de4ded","excerpt":"scss scss는 sass의 3번 버전으로 css 전처리기입니다. css에 왜 전처리기가 필요할까요? css를 접해봤다면 반복되는 작업을 수행할 수 없기 때문에 코드의 길이가 상당히 길어지게 됩니다. 이렇게 긴 css 코드는 구조를 파악하기 힘들어지며 이 것은 생산성과도 직결됩니다. 그 외에도 여러가지 이유가 있지만 scss를 사용하면 선택자를 재사용할 수 있고 전체 구조를 파악하기도 훨씬 쉬워집니다. sass 설치 - window 용\n window의 cli installer인 choco…","html":"<h1 id=\"scss\" style=\"position:relative;\"><a href=\"#scss\" aria-label=\"scss permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>scss</h1>\n<p>scss는 sass의 3번 버전으로 css 전처리기입니다. css에 왜 전처리기가 필요할까요? css를 접해봤다면 반복되는 작업을 수행할 수 없기 때문에 코드의 길이가 상당히 길어지게 됩니다. 이렇게 긴 css 코드는 구조를 파악하기 힘들어지며 이 것은 생산성과도 직결됩니다. 그 외에도 여러가지 이유가 있지만 scss를 사용하면 선택자를 재사용할 수 있고 전체 구조를 파악하기도 훨씬 쉬워집니다.</p>\n<h2 id=\"sass-설치\" style=\"position:relative;\"><a href=\"#sass-%EC%84%A4%EC%B9%98\" aria-label=\"sass 설치 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>sass 설치</h2>\n<p>- window 용\n<code class=\"language-text\">choco install sass</code></p>\n<p>window의 cli installer인 choco를 사용해서 간단하게 설치할 수 있습니다.</p>\n<h2 id=\"watch-option\" style=\"position:relative;\"><a href=\"#watch-option\" aria-label=\"watch option permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>—watch option</h2>\n<p>sass의 —watch option은 특정 파일 혹은 폴더를 실시간으로 추척해서 변화가 감지될 때마다, sass로 작성된 파일을 scss로 컴파일 합니다.\n<code class=\"language-text\">sass -watch app/sass:public/stylesheets</code></p>","frontmatter":{"title":"scss","date":"May 01, 2021"}}},"pageContext":{"slug":"/css/scss/","previous":{"fields":{"slug":"/css/media-query/"},"frontmatter":{"title":"media query","category":"css","draft":false}},"next":{"fields":{"slug":"/회고/4월-회고/"},"frontmatter":{"title":"4월 회고","category":"회고","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}